<template>
	<view style="background-color: #F5F5F5;min-height: 100%;">
		<!-- 地址选择 -->
		<view class="main-bg-color text-white d-flex a-center px-3"
		style="height: 250rpx;"
		hover-class="main-bg-hover-color"
		@click="openPathListPage"
		>
			<view >
				<template v-if="path">
					<view class="font-weight font-lg d-flex a-center">
						<text class="mr-1">{{path.name}}</text>
						<text class="mr-1">{{path.phone}}</text>
						<view class="border border-white rounded px-1 font ml-2" v-if="path.isdefault">默认</view>
					</view>
					<view class="font">
						<text>{{path.path}} {{path.detailPath}}</text>
					</view>
				</template>
				<template v-else>
					<view class="font-weight font-lg d-flex a-center">
						<text >请选择收货地址</text>
					</view>
				</template>
			</view>
			<view class="iconfont icon-you ml-auto"></view>
		</view>
		
		<!-- 列表 -->
		<view style="border-top-left-radius: 25rpx;border-top-right-radius: 25rpx;margin-top: -25rpx;overflow: hidden;">
			<view class="bg-white">
				<uni-list>
					<uni-list-item :showArrow="true">
						<template slot="body">
							<view class="d-flex a-center">
								<image class=" mr-2 rounded" 
								src="/static/images/demo/demo6.jpg" 
								mode="widthFix" 
								style="height: 100rpx;width: 100rpx;"></image>
								<image class=" mr-2 rounded" 
								src="/static/images/demo/demo6.jpg" 
								mode="widthFix" 
								style="height: 100rpx;width: 100rpx;"></image>
								<image class=" mr-2 rounded" 
								src="/static/images/demo/demo6.jpg" 
								mode="widthFix" 
								style="height: 100rpx;width: 100rpx;"></image>
							</view>
							<view class="ml-auto d-flex a-center">
								<text>共3件</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :showArrow="false">
						<template slot="body">
							<view class="d-flex flex-1 j-sb a-center">
								<text>商品总价</text>
								<price color="text-dark">2999</price>
							</view>
							
						</template>
					</uni-list-item>
					<uni-list-item >
						<template slot="body">
							<view class="d-flex flex-1 j-sb a-center">
								<view >运费</view>
								<text>包邮</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :showArrow="true" :clickable="true" @click="toOrderCouponPage">
						<template slot="body">
							<view class="d-flex flex-1 j-sb a-center">
								<text>优惠券</text>
								<text>无可用</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item >
						<template slot="body">
							<view class="d-flex flex-1 j-sb a-center">
								<view >小计</view>
								<view>
									<price>2999</price>
								</view>
							</view>
						</template>
					</uni-list-item>
					<divider></divider>
					<uni-list-item :showArrow="true"
					:clickable="true"
					@click="openOrderInvoice">
						<template slot="body">
							<view class="d-flex flex-1 j-sb a-center">
								<text>发票</text>
								<text>电子发票-个人</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		
		<!-- 底部栏 -->
		<view class="p-2 position-fixed d-flex a-center j-end border bottom-0 left-0 right-0 bg-white">
			<text class="mr-1">合计:</text>
			<price>2999</price>
			<view class="px-2 py ml-2 rounded main-bg-color text-white font-md"
			hover-class="main-bg-hover-color"
			@click="toOpenPayMethodsPage">去支付</view>
		</view>
	</view>
</template>

<script>
	import uniList from "@/components/uni-ui/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	import price from "@/components/common/price.vue"
	import {mapGetters} from "vuex"
	
	export default {
		components: {
			uniList,
			uniListItem,
			price,
		},
		
		data() {
			return {
				path: false
			}
		},
		
		computed: {
			...mapGetters(['defaultPath'])
		},
		
		methods: {
			
			//跳转优惠券页面
			toOrderCouponPage() {
				uni.navigateTo({
					url: '../order-coupon/order-coupon'
				});
			},
			
			toOpenPayMethodsPage() {
				uni.navigateTo({
					url: '../pay-methods/pay-methods'
				});
			},
			
			openPathListPage() {
				uni.navigateTo({
					url: '../user-path-list/user-path-list?type=choose'
				});
			},
			
			openOrderInvoice() {
				uni.navigateTo({
					url: '../order-invoice/order-invoice'
				});
			}
		},
		
		onLoad() {
			if (this.defaultPath.length) {
				this.path = this.defaultPath[0]
			}
			//开启监听选择收货地址事件
			uni.$on('choosePath', res => {
				this.path = res
			})
		},
		
		onUnload() {
			//卸载监听收货地址事件
			//不传参数会移除所有的事件
			uni.$off('choosePath', res=> {
				console.log('移除监听收货地址事件')
			})
		}
	}
</script>

<style>

</style>
